import React from 'react';
import { Link } from 'react-router-dom';
import { Checkbox } from 'antd';
import Axios from 'axios';
import { apiPrefix } from 'shared/api';
import UserInput from './QueryInputModule/UserInput';
import RosterInput from './QueryInputModule/RosterInput';
import ContractInput from './QueryInputModule/ContractInput';
import TimeInput from './QueryInputModule/TimeInput';
import CertificateInput from './QueryInputModule/CertificateInput';

import './index.less';

const CheckboxGroup = Checkbox.Group;

class RosterManage extends React.Component {
  constructor(props) {
    super(props);
    this.tabs = [
      { title: '按用户基本信息', key: '1' },
      { title: '按花名册', key: '2' },
      { title: '按合同', key: '3' },
      { title: '按证书', key: '4' },
      { title: '按范围', key: '5' },
    ];
    this.state = {
      showOptions: [],
      peoples: [],
      checkTab: 0,
      tableHead: [
        { title: '姓名', key: 'user' },
        { title: '性别', key: 'sex' },
        { title: '员工编号', key: 'idnumber' },
        { title: '身份证号', key: 'birthday' },
        { title: '生日', key: 'birthday' },
        { title: '年龄', key: 'age' },
      ],
      checkedList: [],
      indeterminate: true,
      checkAll: false,
      queryMessage: {
        user: {},
        dynamics: {},
        contract: {},
        certificate_type_ids: [],
      },
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/roster/rosters`;
    Axios.get(api)
      .then((response) => {
        this.setState({ peoples: response.data.data });
      });
    const api2 = `${apiPrefix}api/v1/roster/dynamics`;
    Axios.get(api2)
      .then((response) => {
        const res = response.data.data;
        const arr = [];
        for (let i = 0; i < res.length; i++) {
          arr.push(res[i].name);
        }
        this.setState({ showOptions: arr });
      });
  }
  changTabs=(number) => {
    console.log(number);
    this.setState({ checkTab: number });
  }
  onChange = (checkedList) => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < this.state.showOptions.length,
      checkAll: checkedList.length === this.state.showOptions.length,
    });
    console.log(checkedList);
  };

  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked ? this.state.showOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };
  handleOnchange=(value, key) => {
    if (key === 'project_id') {
      const { queryMessage } = this.state;
      queryMessage[key] = value;
      this.setState({ queryMessage: { ...this.state.queryMessage } });
    } else {
      const { user } = this.state.queryMessage;
      user[key] = value;
      this.setState({ queryMessage: { ...this.state.queryMessage } });
    }
    console.log(this.state.queryMessage);
  }
  handleOnchangeDynamics=(value, key) => {
    const { dynamics } = this.state.queryMessage;
    dynamics[key] = value;
    this.setState({ queryMessage: { ...this.state.queryMessage } });
  }
  handleOnchangeContract=(value, key) => {
    const { contract } = this.state.queryMessage;
    contract[key] = value;
    this.setState({ queryMessage: { ...this.state.queryMessage } });
  }
  handleOnchangeCretificate=(value) => {
    const { certificate_type_ids } = this.state.queryMessage;
    certificate_type_ids.push(value);
    this.setState({ queryMessage: { ...this.state.queryMessage } });
    console.log(this.state.queryMessage);
  }
  render() {
    const { checkTab, peoples, tableHead, showOptions, checkedList, queryMessage } = this.state;
    return (
      <div className="content">
        <div>
          <h3>员工花名册管理
            <button className="green-button">导入Excel</button>
            <button className="addButton"><Link to="/" >添加</Link></button>
          </h3>
          <section className="tabs">
            <div className="tabs-nav-scroll">
              <ul>
                {
                    this.tabs.map((value, index) => (
                      <li key={index} onClick={() => this.changTabs(index)} className={checkTab === index ? 'check-tab' : 'no-check'}>{value.title}</li>
                    ))
                  }
              </ul>
            </div>
            <section>
              {checkTab === 0 && <UserInput queryMessage={queryMessage} onChange={(value, key) => this.handleOnchange(value, key)} />}
              {checkTab === 1 && <RosterInput queryMessage={queryMessage} onChange={(value, key) => this.handleOnchangeDynamics(value, key)} />}
              {checkTab === 2 && <ContractInput queryMessage={queryMessage} onChange={(value, key) => this.handleOnchangeContract(value, key)} />}
              {checkTab === 3 && <CertificateInput queryMessage={queryMessage} onChange={(value, key) => this.handleOnchangeCretificate(value, key)} />}
              {checkTab === 4 && <TimeInput queryMessage={queryMessage} onChange={(value, key) => this.handleOnchangeDynamics(value, key)} />}
            </section>
          </section>
          <section className="roster-show">
            <div>
              <h4>
              查询结果显示,请勾选需要显示的列名称
                <span> | </span>
                <Checkbox
                  indeterminate={this.state.indeterminate}
                  onChange={this.onCheckAllChange}
                  checked={this.state.checkAll}
                >
                全选
                </Checkbox>
              </h4>
              <CheckboxGroup
                options={showOptions}
                value={this.state.checkedList}
                onChange={this.onChange}
              />
            </div>
          </section>
          <section className="query-results-span">
            <span>查询结果：{peoples.length}条数据</span>
          </section>
          <section className="roster-manage-table">
            <table>
              <thead>
                <tr>
                  <th className="w50">序号</th>
                  <th className="w200" />
                  {
                    tableHead.map((value, index) => (
                      <th key={index} className="w80">{value.title}</th>
                    ))
                  }
                  {
                    checkedList.map((val, ind) => (
                      <td key={ind} className="w125">{val}</td>
                  ))
                  }
                </tr>
              </thead>
              <tbody>
                {
                  peoples.map((value, index) => (
                    <tr key={index}>
                      <td>{index + 1}</td>
                      <td>
                        <Link to={`/RosterManage/PersonalData/${value.user.id}`} className="check-resume">查看履历</Link>
                        <Link to={`/RosterManage/EditRoster/${value.user.id}`} className="edit-resume">编辑履历</Link>
                      </td>
                      <td>{value.user.name}</td>
                      <td>{value.user.sex}</td>
                      <td>{value.user.erp_id}</td>
                      <td>{value.user.idcard}</td>
                      <td>{value.user.birthday}</td>
                      <td>{value.user.age}</td>
                      {
                        checkedList.map((val, ind) => (
                          <td key={ind}>{value.roster.dynamics[val]}</td>
                      ))
                      }
                    </tr>
                  ))
                }
              </tbody>
            </table>
          </section>
        </div>
      </div>
    );
  }
}

export default RosterManage;
